<template>
  <div class="pass-list">
    <div class="title-container">
      <div class="title" :style="'background-position: center -' + (className - 1) * 65 + 'px'"></div>
      <img src="./img/title-bg-1.png" alt="">
    </div>
    <div class="pass-list-main">
      <div>
        <ul>
          <li v-for="item in locks" :class="{lock: item.lock}">
            <router-link v-if="!item.lock" :to="'/trade-list/' + className + '/' + item.index" tag="div">
              <span :style="'background-position:' + (-(item.index) * 50) + 'px center'"></span>
            </router-link>
            <div v-else @click="showModal">
              <span :style="'background-position:' + (-(item.index) * 50) + 'px center'"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import { COUNT } from '@/api/index'
  export default {
    name: "pass-list",
    data() {
      return {
        locks: []
      }
    },
    created() {
      var that = this;
      var counts = [];
      that.$ajax.get(COUNT + this.$route.params.item)
        .then(function (res) {
          for (var i = 0; i < res.data.t[0].count; i++) {
            counts.push({lock: true, index: i});
          }
          counts[0].lock = false;
          that.locks = counts;
        })
        .catch(function (res) {
          console.log(res);
        })
    },
    computed: {
      className() {
        return this.$route.params.item;
      }
    },
    watch:{
      locks(newVal){
        var str = JSON.stringify(newVal);
        window.localStorage.setItem(this.$route.params.item, str);
      }
    },
    methods:{
      showModal(){
        alert('请解锁前面关卡');
      }
    }
  }
</script>

<style scoped lang="less">
  .pass-list {
    height: 100%;
    padding-top: 130px;
    background: url("./img/bg.jpg");
    background-size: 100% 100%;
    .title-container {
      margin-top: -130px;
      padding-top: 20px;
      > img {
        display: block;
        margin: 0 auto;
      }
      .title {
        height: 65px;
        background: url("./img/title-bg.png") no-repeat center top;
      }
    }
    .pass-list-main {
      height: 100%;
      padding-top: 20px;
      padding-bottom: 100px;
      > div {
        padding-top: 20px;
        height: 100%;
        overflow: auto;
        ul {
          text-align: center;
          padding: 0 20px;
          &:after {
            content: '';
            display: block;
            height: 0;
            clear: both;
          }
          li {
            width: 20%;
            padding-bottom: 20px;
            float: left;
            &.lock {
              > div {
                position: relative;
                &:before {
                  content: '';
                  display: block;
                  position: absolute;
                  top: -10px;
                  left: -4px;
                  width: 20px;
                  height: 25px;
                  background: url("./img/lock-ico.png");
                }
                background-image: url("./img/lock.png");
              }
            }
            > div {
              height: 56px;
              width: 50px;
              background: url("./img/lock-1.png") no-repeat center center;
              margin: 0 auto;
              span {
                display: block;
                height: 100%;
                width: 100%;
                background: url("./img/index-bg.png") left center;
              }
            }
            /*height:65px;
            width:65px;
            display: table-cell;
            &.lock{
              background-image: url("./img/lock.png") ;
            }*/
          }
        }
      }
    }
  }
</style>
